<template>
  <div>
    <component
      v-for="option in options"
      :is="radioComponent"
      :key="option[keyAlias]"
      :label="option[labelAlias]"
      :value="option[valueAlias]"
      :disabled="option[disabledAlias]"
      v-bind="option"
    >
      <!-- 你可以这里放插槽内容，如果需要 -->
    </component>
  </div>
</template>

<script>
import { ElRadio, ElRadioButton } from 'element-plus'

export default {
  name: 'RenderRadioOptions',
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  computed: {
    componentProps() {
      return this.item.componentProps || {}
    },
    options() {
      return this.componentProps.options || []
    },
    labelAlias() {
      return (this.componentProps.props && this.componentProps.props.label) || 'label'
    },
    valueAlias() {
      return (this.componentProps.props && this.componentProps.props.value) || 'value'
    },
    disabledAlias() {
      return (this.componentProps.props && this.componentProps.props.disabled) || 'disabled'
    },
    radioComponent() {
      return this.item.component === 'RadioGroup' ? ElRadio : ElRadioButton
    }
  }
}
</script>
